<template>
  <div class="box abnormal-equipment">
    <div class="header">
      <div class="title">异常设备监控</div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="empty">
      <div class="tips">数据加载中...</div>
    </div>

    <!-- 数据内容 -->
    <el-scrollbar v-else-if="listData.length" class="scrollbar body">
      <el-table
        :data="listData"
        fit
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          padding: '7px 0 6px',
          background: '#EFF0F2',
          'font-weight': '400',
          'text-align': 'left',
          color: '#333333',
        }"
        :cell-style="{
          padding: '15px 0',
          'text-align': 'left',
          color: '#999999',
        }"
      >
        <el-table-column label="故障时间" width="160px">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备地址" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备编号" width="120px">
          <template #default="scope">
            <span>{{ scope.row.innerCode }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <!-- 空状态 -->
    <div v-else class="empty">
      <img src="@/assets/images/empty.png" />
      <div class="tips">暂无数据</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getDeviceChartData } from '@/api/earch/device'

// 定义响应式变量
const isLoading = ref(true)
const listData = ref([])

onMounted(async () => {
  try {
    const response = await getDeviceChartData()
    // 转换数据格式以匹配表格结构
    listData.value = (response || []).map(item => ({
      ...item,
      updateTime: item.time,    // 保持字段对应
      innerCode: item.code      // 保持字段对应
    }))
  } catch (e) {
    console.error('数据加载失败', e)
  } finally {
    isLoading.value = false
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.abnormal-equipment {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 120px) * 0.4);
  min-height: 353px;
  background: #ffffff;
  border-radius: 20px;

  .header {
    padding: 16px 20px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tips {
      margin-top: 25px;
      color: #1d1c1c;
      font-size: 14px;
    }
  }

  .body {
    flex: 1;
    margin-top: 20px;
    ::v-deep .el-scrollbar__view {
      height: 100%;
    }
  }

  .scrollbar {
    height: calc(100% - 56px);
    padding: 0 20px;
  }
}
</style>